<template>
	<view>
		<!-- 搜索 -->
		<view class="w sousuo" >
			<view>
				<img class="iconimg" src="../../../../static/image/fangdajing.png"   @click="gotoSouSuo()">
				<input class="inpt" v-model="inputValue" placeholder=" 请输入内容" />
			</view>
			
			<view class="all">
				<text> 国学</text>
				<text> 英语</text>
				<text @click="goToAllList('儿歌故事')"> 全部</text>
			</view>
		</view>
		
		<!-- 轮播 -->
		<view>
			<swiper class="w" circular 
			:indicator-dots="indicatorDots" 
			:autoplay="autoplay" 
			:interval="interval"
			:duration="duration">
			    <swiper-item v-for="item in lunboimg" :key="item.imgid">
			     <view>
			      <image :src="item.imgsrc" class="imgsize" mode="scaleToFill"/>
			     </view>
			    </swiper-item>
			   </swiper>
		</view>
		
		<!-- 国学 -->
		<view class="w">
			<view class="mbtm">
				<text>国学</text>
			</view>
			<view class="box">
				<view class="boxbox"  v-for="item in guoxue" :key="item.id" @click="goToSongDetails(item.id)">
					<view class="pos11">
						<img class="imgbox" :src="item.imgsrc">
						<view class="text3">
							共{{item.title3}}课
						</view>
					</view>
					<view>
						{{item.title1}}
					</view>
					<view class="text">
						{{item.title2}}
					</view>
				</view>
				<!-- <view>
					<img class="imgbox" src="../../../../static/image/儿歌1.jpg" alt="">
					<view>
						儿歌故事名称
					</view>
					<view>
						推荐语
					</view>
				</view> -->
			</view>
		</view>
		
		<!-- 英语 -->
		<view class="w">
			<view class="mbtm">
				<text>英语</text>
			</view>
			<view class="box">
				<view class="boxbox" v-for="item in yingyu" :key="item.id" @click="goToSongDetails(item.id)">
					<view class="pos11">
						<img class="imgbox" :src="item.imgsrc">
						<view class="text3">
							共{{item.title3}}课
						</view>
					</view>
					<view>
						{{item.title1}}
					</view>
					<view class="text">
						{{item.title2}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 逻辑 -->
		<view class="w">
			<view class="mbtm">
				<text>逻辑</text>
			</view>
			<view class="box">
				<view class="boxbox" v-for="item in luoji" :key="item.id" @click="goToSongDetails(item.id)">
					<view class="pos11">
						<img class="imgbox" :src="item.imgsrc">
						<view class="text3">
							共{{item.title3}}课
						</view>
					</view>
					<view>
						{{item.title1}}
					</view>
					<view class="text">
						{{item.title2}}
					</view>
				</view>
			</view>
		</view>
		
		<!-- 美术 -->
		<view class="w">
			<view class="mbtm">
				<text>美术</text>
			</view>
			<view class="box">
				<view class="boxbox" v-for="item in meishu" :key="item.id" @click="goToSongDetails(item.id)">
					<view class="pos11">
						<img class="imgbox" :src="item.imgsrc">
						<view class="text3">
							共{{item.title3}}课
						</view>
					</view>
					<view>
						{{item.title1}}
					</view>
					<view class="text">
						{{item.title2}}
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 轮播
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				lunboimg:[
					{
						imgid:1,
						imgsrc:"/static/image/儿歌1.jpg"
					},
					{
						imgid:2,
						imgsrc:"/static/image/儿歌1.jpg"
					}
				],
				// 英语
				yingyu:[
					{
						id:1,
						imgsrc:"/static/image/儿歌1.jpg",
						title1:"白雪公主",
						title2:"推荐语",
						title3:"11"
					},
					{
						id:2,
						imgsrc:"/static/image/儿歌1.jpg",
						title1:"白雪公主",
						title2:"推荐语",
						title3:"11"
					},
					
				],
				// 国学
				guoxue:[
					{
						id:1,
						imgsrc:"/static/image/儿歌1.jpg",
						title1:"白雪公主",
						title2:"推荐语",
						title3:"11"
					},
					{
						id:2,
						imgsrc:"/static/image/儿歌1.jpg",
						title1:"白雪公主",
						title2:"推荐语",
						title3:"11"
					},
					
				],
				// 逻辑
				luoji:[
					{
						id:1,
						imgsrc:"/static/image/儿歌1.jpg",
						title1:"白雪公主",
						title2:"推荐语",
						title3:"11"
					},
					{
						id:2,
						imgsrc:"/static/image/儿歌1.jpg",
						title1:"白雪公主",
						title2:"推荐语",
						title3:"11"
					},
				],
				// 美术
				meishu:[
					{
						id:1,
						imgsrc:"/static/image/儿歌1.jpg",
						title1:"白雪公主",
						title2:"推荐语",
						title3:"11"
					},
					{
						id:2,
						imgsrc:"/static/image/儿歌1.jpg",
						title1:"白雪公主",
						title2:"推荐语",
						title3:"11"
					},
				],
				inputValue: '',
			}
		},
		methods: {
			// 跳转函数
			goToSongDetails(id){
				console.log(id);
				// 路由跳转到--详情页面
				uni.navigateTo({
					url: '/uni_modules/song-story-details/components/song-story-details/song-story-details'
				});
			},
			
			goToAllList(theme){
				// 路由跳转到--频道页面
				uni.navigateTo({
					url: '/uni_modules/song-story-channellist/components/song-story-channellist/song-story-channellist'
				});
			},
			
			gotoSouSuo(){
				// 路由跳转到--搜索页面
				uni.navigateTo({
					url: '/uni_modules/my-earlyEducation/components/searchPage/searchPage'
				});
			}
		}
	}
</script>

<style scoped>
	.w{
		width: 95%;
		margin: 0 auto;
	}
	.imgsize{
		width: 100%;
	}
	.mbtm{
		margin-bottom: 5px;
	}
	.box{
	  display: flex;
	  justify-content: space-between;
	  flex-wrap: wrap;
	}
	.boxbox{
		width: 49%;
	}
	.imgbox{
		width: 100%;
		height: 100px;
	}
	.sousuo{
		display: flex;
		justify-content: space-between;
		margin-top: 5px;
		margin-bottom: 3px;
	}
	.iconimg{
		width: 25px;
		height: 23px;
	}
	.inpt{
		display: inline-block;
		width: 150px;
		height: 23px;
		border: solid 2px #DDDDDD;
		border-radius: 20px;
		font-size: 13px
	}
	.all{
		background-color: #DDDDDD;
		width: 120px;
		height: 27px;
		border-radius: 20px;
		line-height: 27px;
		text-align: center;
	}
	text{
		font-size: 13px;
	}
	.text{
		font-size: 13px;
		color: #B2AFAF;
		margin-bottom: 5px;
	}
	.text3{
		position: absolute;
		right: 10px;
		bottom: 10px;
		color: #FF0000;
		font-size: 15px;
	}
	.pos11{
		position: relative;
	}
</style>
